<template>
  <div class="prim-tab" :class="{ logins: login }" :style="login ? { fontSize: '14px', height: '40px' } : { fontSize: '18px', height: '50px' }">
    <div class="tab-item" v-for="(item, key) in tabMenu" @click="updateCurrentMenu(item.id)">
      <div :class="currentMenu === item.id ? 'active' : ''">
        <span>{{ item.text }}</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { TabMenuItem } from '@/types/public'

  /**
   * tabMenu： tab数据项
   *
   * currentMenu： 菜单ID
   */
  const props = defineProps({
    tabMenu: {
      type: Array<TabMenuItem>
    },

    currentMenu: {
      type: String,
      default: ''
    },

    login: {
      type: Boolean,
      default: false
    }
  })

  const emit = defineEmits(['handleClick'])
  const updateCurrentMenu = (str: string) => {
    emit('handleClick', str)
  }
</script>
<style lang="scss">
  .prim-tab {
    line-height: 40px;
    display: flex;
    width: 100%;
    position: relative;

    .tab-item {
      position: relative;
      margin-right: 30px;
      cursor: pointer;
      color: var(--el-text-color-primary);
    }
    .active {
      color: $text-color;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        background-color: var(--el-color-primary);
        z-index: 1;
      }
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: var(--el-border-color-light);
    }
  }
  .logins {
    &::after {
      height: 3px;
    }
  }
</style>
